<template>
	<Menu mode="horizontal" :theme="light" @on-select = "clickToolButton">
    <Menu-item key="1">
      <Icon type="ios-paper"></Icon>
      内容管理
    </Menu-item>
    <Menu-item key="2">
      <Icon type="ios-people"></Icon>
      用户管理
    </Menu-item>
    <Submenu key="3">
      <template slot="title">
        <Icon type="settings"></Icon>
        工具
      </template>
        <Menu-item key="3-1">
        	<Icon type="ios-barcode"></Icon>
        	测距
        </Menu-item>
        <Menu-item key="3-2">活跃分析</Menu-item>
        <Menu-item key="3-3">时段分析</Menu-item>
    </Submenu>
</Menu>
</template>

<script>
import turf from '@turf/turf'
import mapboxgl from 'mapbox-gl/dist/mapbox-gl.js'
export default {
	methods:{
		clickToolButton:function(key){
			switch (key){
				case "3-1":
					this.messureDistance();
					break;
				default: break;
			}
		},
		messureDistance:function(){
			if(this.popup.isOpen&&this.popup.isOpen()){
				this.popup.remove();
			}
			this.map.getCanvasContainer().style.cursor="crosshair";
			this.map.on("click",this.mapClick);
			this.map.on("mousemove",this.mapMouseMove);
			this.map.on("dblclick",this.mapDoubleClick);
			
		},
		mapClick:function(e){
			this.map.doubleClickZoom.disable();
			var point = [e.lngLat.lng,e.lngLat.lat];
			this.coordinates[this.clickVertexNum] = point;
			if(this.clickVertexNum===0){
				var opts = {
					closeOnClick:false
				}
				var popup = new mapboxgl.Popup(opts)
				  .setLngLat(e.lngLat)
				  .setText("距离：0km")
				  .addTo(this.map);
				this.popup = popup;
				this.popup.on("close",this.popupClosed);
			}
			if(!this.map.getSource("distance")){
				var source = {
					type:"geojson",
					data:turf.lineString(this.coordinates)
				}
				this.map.addSource("distance",source);
				this.map.addLayer({
				  id:"distance-line",
				  type:"line",
				  source:"distance",
				  "layout":{
				    "line-cap":"round",
				    "line-join":"round"
				  },
				  "paint":{
				    "line-color":"#ff0000",
				    "line-width":2
				  }
				});
			}
			this.clickVertexNum++;
		},
		mapMouseMove:function(e){
			if(this.clickVertexNum===0){return;}
			this.popup.setLngLat(e.lngLat);
			var point = [e.lngLat.lng,e.lngLat.lat];
			this.coordinates[this.clickVertexNum] = point;
			var newLineSource = turf.lineString(this.coordinates);
			this.map.getSource("distance").setData(newLineSource);
			this.calcDistance();
		},
		mapDoubleClick:function(e){
			var point = [e.lngLat.lng,e.lngLat.lat];
			this.coordinates[this.clickVertexNum] = point;
			this.clickVertexNum = 0;
			this.coordinates = [];
			var agent = navigator.userAgent;
			if(agent.indexOf("Chrome")!==-1||agent.indexOf("Safari")!==-1){//webkit
				this.map.getCanvasContainer().style.cursor="-webkit-grab";
			}else if(agent.indexOf("Firefox")!==-1){//firefox
				this.map.getCanvasContainer().style.cursor="-moz-grab";
			}else{
				this.map.getCanvasContainer().style.cursor="grab";
			}
			
			this.map.off("click",this.mapClick);
			this.map.off("mousemove",this.mapMouseMove);
			this.map.off("dbclick",this.mapDoubleClick);
			this.map.doubleClickZoom.enable();
		},
		popupClosed:function(popup){
			this.map.removeSource("distance");
			this.map.removeLayer("distance-line");
		},
		calcDistance:function(){
			var distance = 0;
			for(var i=1;i<this.coordinates.length;i++){
				var pt1 = turf.point(this.coordinates[i-1]);
				var pt2 = turf.point(this.coordinates[i]);
				var d = turf.distance(pt1, pt2, "kilometers");
				distance += d;
				distance = Number(distance.toFixed(2));
			}
			this.popup.setText("距离："+distance+"km")
		}
	},
	props:["map"],
	data(){
		return{
			clickVertexNum:0,
			coordinates:[],
			popup:{}
		}
	}
}
</script>

<style scoped>
	.ivu-menu-horizontal {
    height: 40px;
    line-height: 40px;
}
</style>
